<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojo.html.set test</title>

	<script src="../../dojo.js" data-dojo-config="isDebug:true, parseOnLoad:false"></script>
	<script>
		require([
			"doh",
			"dojo/_base/array", "dojo/aspect",
			"dojo/_base/declare", "dojo/dom", "dojo/dom-construct", "dojo/html", "dojo/_base/lang", "dojo/parser",
			"dojo/query", "dojo/NodeList-html","dojo/domReady!"
		], function(doh, array, aspect, declare, dom, domConstruct, html, lang, parser, query){

			/* test goals
			 * injecting content as string, node, nodelist. 
			 * injecting exotic nodes/markup e.g. table rows, lists
			 * injecting whole html documents (extractContent option)
			 * parsing resulting content
			 
			 * cleanup when setting content
			*/
			declare("SimpleThing", null, {
				constructor: function(params, node) {
					node.setAttribute("test", "ok");
				}
			});
			
			declare("ParserInstantiateTester", null, {
				constructor: function(params, node) {
					node.setAttribute("test", "ok");
				}
			});
			declare("DeclarativeContentSetter", html._ContentSetter, {
				postscript: function() {
					this.set();
				}
			});
	
			function ieTrimSpaceBetweenTags(str){
				return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1");
			}


			targetNode = null; 
			
			doh.register("basicChecks", [
				{
					name: 'set',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = dom.byId("pane1");
						var msg = "Simple No-params Test";
						console.log("targetNode has content: ", targetNode.innerHTML);
						var result = "";
						html.set(
							targetNode,
							msg
						);
						console.log("after set, targetNode has content: ", targetNode.innerHTML);
						doh.is(msg, targetNode.innerHTML);
					}
				},
				{
					name: 'setContentWithOnEnd',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = dom.byId("pane1");
						var msg = "setContentWithOnEnd Test";
						var result = false;
						html.set(
							targetNode,
							msg,
							{
								onEnd: function() {
									lang.getObject(this.declaredClass).prototype.onEnd.call(this);
									result = true;
								}
							}
						);
						doh.is(msg, targetNode.innerHTML);
						doh.t(result);
					}
				},
				{
					name: 'setContent_with_parsing',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';
						html.set(
							dom.byId("pane1"),
							cont,
							{
								postscript: function() {
									this.set();

									doh.t(typeof ifrs != "undefined" && ifrs.declaredClass=="SimpleThing");
									doh.t(this.parseResults.length > 0);
								},
								parseContent: true
							}
						);
					}
				},
				{
					name: 'emptyElement',
					runTest: function(t){
						// Test of deprecated _emptyNode() method
						console.log("basicChecks: " + this.name);
						var msg = "setContentWithOnEnd Test";
						var node = dom.byId("pane1");
						node.innerHTML = '<div><span>just</span>some test<br/></div>text';
						var cNodes = node.childNodes.length;

						html._emptyNode(dom.byId("pane1"));
						doh.t(node.childNodes.length == 0 && node.innerHTML == "");
					}
				},
				{
					name: 'changeContentTRHead',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = query('table#tableTest > thead > tr')[0];

						var markup = "<td><div>This</div>Should<u>Work</u></td>";
						html.set(
							targetNode,
								markup,
							{
								"testname": "basicChecks changeContentTRHead"
							}
						);
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'changeContentTHead',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = query('table#tableTest > thead')[0];

						var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
						html.set(
							targetNode,
								markup,
							{
								"testname": "basicChecks changeContentTHead"
							}
						);
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'changeContentTRBody',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = query('table#tableTest > tbody > tr')[0];
						var markup = "<td><div>This</div>Should<u>Work</u></td>";
						html.set(
							targetNode,
								markup,
							{
								"testname": "basicChecks changeContentTRBody"
							});
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'changeContentTBody',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = query('table#tableTest > tbody')[0];
						var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
						html.set(
							targetNode, markup,
							{
								"testname": "basicChecks changeContentTBody"
							});
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'changeContentTable',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = query('table#tableTest')[0];
						var markup = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
						html.set(
							targetNode, markup,
							{
								"testname": "basicChecks changeContentTable"
							});
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'setNodeList',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						var tmpUL = domConstruct.create("ul");
						domConstruct.create("li", { innerHTML: "item 1" }, tmpUL);
						domConstruct.create("li", { innerHTML: "item 2" }, tmpUL);
						console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length);
						targetNode = dom.byId("pane1");
						html.set(
							targetNode, tmpUL.childNodes,
							{
								"testname": "basicChecks setNodeList"
							});
						var res = query("li", dom.byId("pane1")).length;
						doh.is(2, res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'setMixedContent',
					runTest: function(t){
						console.log("basicChecks: " + this.name);

						targetNode = dom.byId("pane1");
						var markup = '<h4>See Jane</h4>'
						 + 'Look at her <span>Run</span>!';
						html.set(
							targetNode, markup,
							{
								"testname": "basicChecks setMixedContent"
							});
						var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
						doh.is(markup.toLowerCase(), res);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				},
				{
					name: 'extractContent',
					runTest: function(t){
						console.log("basicChecks: " + this.name);
						targetNode = dom.byId("pane1");
						var markup = ''
						+'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">'
						+'<html>											'
						+'	<head>											'
						+'		<title>										'
						+'			the title									 '
						+'		</title>									'
						+'	</head>											'
						+'	<body>											'
						+'		<p>											'
						+'			This is the <b>Good Stuff</b><br>		'
						+'		</p>										'
						+'	</body>											'
						+'</html>											';

						html.set(
							targetNode, markup,
							{
								"testname": "basicChecks changeContentTable",
								extractContent: true
							});
						doh.t(targetNode.innerHTML.indexOf("title") == -1);
						doh.t(query("*", targetNode).length == 3);
					},
					tearDown: function(){
						domConstruct.empty(targetNode);
					}
				}
			]);
			doh.register("nodelistExtension", [
				{
					name: 'nodelistHtml',
					runTest: function(t){
						console.log("nodelistExtension: " + this.name);

						query(".zork").html("<li data-dojo-type='ParserInstantiateTester'>1</li><li data-dojo-type='ParserInstantiateTester'>2</li><li data-dojo-type='ParserInstantiateTester'>3</li>",
						{
							parseContent: true,
							onBegin: function() {
								this.content = this.content.replace(/([0-9])/g, "MOOO");
								this.inherited("onBegin", arguments);
							}
						}).removeClass("notdone").addClass("done");

						var liNodes = query(".zork > li");

						// test to make sure three li's were added to class="zork" node (3x 3 set li's)
						doh.is(9, liNodes.length);

						// test the innerHTML's got replaced in our onBegin
						doh.t( liNodes.every(function(n) { return n.innerHTML.match(/MOOO/) }) );
						console.log(this.name + ": innerHTML.match subtest was ok");

						// test the parent elements got the correct className
						doh.t( query(".zork").every(function(n) { return n.className == "zork done"; }) );
						console.log(this.name + ": li.className subtest was ok");

						// and test the parser correctly created object from the child nodes
						// ...they should all have a test attribute now
						doh.t( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) );
						console.log(this.name + ": Tester instantiation subtest(getAttribute) was ok");

					},
					tearDown: function(){
						// domConstruct.empty(targetNode);
					}
				},
				{
					name: "nodeListSimple",
					runTest: function(t){
						var txt = "foo";
						query("#simpleText").html("<p>"+txt+"</p>");

						// check if its there at all
						var len = query("#simpleText p").length;
						doh.is(1, len);

						// check the inner html is right:
						var p = query("#simpleText p")[0];
						doh.t( p && p.innerHTML == txt );
					}
				}
			]);
			doh.register("fromMarkup", [
				{
					name: 'contentOpFromMarkup',
					runTest: function(t){
						console.log("fromMarkup: " + this.name);

						parser.parse("markupSetContentOp");
						doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOp: new node content");
					},
					tearDown: function(){
						dom.byId("markupPane").innerHTML = "initial content";
					}
				},
				{
					name: 'extendedContentOpFromMarkup',
					runTest: function(t){
						console.log("fromMarkup: " + this.name);

						parser.parse("markupSetContentOpX");

						doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase());
					},
					tearDown: function(){
						dom.byId("markupPane").innerHTML = "initial content";
					}
				}
			]);
			doh.register("reuse", [
				{
					name: 'ContentSetterReUse',
					runTest: function(t){
						console.log("fromMarkup: " + this.name);

						targetNode = dom.byId('pane1');
						var args = [
							[
								"simple"
							],
							[
								'<div data-dojo-type="SimpleThing" data-dojo-id="id00">parsed content</div>',
								{
									parseContent: true
								}
							],
							[
								'<div data-dojo-type="SimpleThing" data-dojo-id="id01">parsed content</div>',
								{
									parseContent: true
								}
							]
						];
						var setter = new html._ContentSetter({
							node: targetNode
						});
						array.forEach(args, function(applyArgs) {
							setter.node = targetNode;
							setter.set.apply(setter, applyArgs);
							setter.tearDown();
						});
						doh.t(id00 && id01);
						// check we cleaned up after ourselves
						doh.f(setter.parseResults);
					},
					tearDown: function(){
						dom.byId("markupPane").innerHTML = "initial content";
					}
				}
			]);

			// Test specification of inherited attributes dir, lang, etc.
			var handle;
			doh.register("inherited", [
				{
					name: 'unspecified',
					runTest: function(t){
						var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';

						var parserCalled, inherited;
						handle = aspect.after(parser, "parse", function(args){
							parserCalled = true;
							inherited = args.inherited;
						}, true);

						html.set(
							dom.byId("pane1"),
							cont,
							{
								parseContent: true
							}
						);
						doh.t(parserCalled, "parser was called");
						doh.f("dir" in inherited, "no dir specified");
						doh.f("lang" in inherited, "no lang specified");
					},
					tearDown: function(){
						handle.remove();
					}
				},
				{
					name: 'specified',
					runTest: function(t){
						var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';

						var parserCalled, inherited;
						handle = aspect.after(parser, "parse", function(args){
							parserCalled = true;
							inherited = args.inherited;
						}, true);

						html.set(
							dom.byId("pane1"),
							cont,
							{
								dir: "rtl",
								lang: "it_it",
								textDir: "ltr",
								parseContent: true
							}
						);
						doh.t(parserCalled, "parser was called");
						doh.is("rtl", inherited.dir, "dir");
						doh.is("it_it", inherited.lang, "lang");
						doh.is("ltr", inherited.textDir, "textdir");
					},
					tearDown: function(){
						handle.remove();
					}
				}

			]);

			doh.run();
		});
	</script>
	<style>
		@import "../../../dojo/resources/dojo.css";

		.box {
			border: 1px solid black;
			height: 190px;
			width: 80%;
			overflow: auto;
		}
		.zork {
			width: 200px;
			margin: 10px;
			list-style-type: none;
		}
		.notdone {
			color: #999; background-color: #ccc;
		}
		.done {
			color: #fff; background-color: #090;
		}
		.done li {
			border: 1px; background-color: orange;
			width: 180px;
		}
		.red {
			color: red;
		}

	</style>
</head>
<body class='tundra'>
	<h1>dojo.html.set</h1>

	<div id="pane1"></div>
	<div id="pane2"></div>
	<table id='tableTest' class='box'>
		<thead>
			<tr>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
			</tr>
		<tbody>
	</table>
	<ul class="zork notdone">initial content</ul>
	<ul class="zork notdone">initial content</ul>
	<ul class="zork notdone">initial content</ul>

	<div id="markupPane">initial content</div>
	<div id="markupSetContentOp">
		<div data-dojo-type="DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div>
	</div>
	<div id="markupSetContentOpX">
		<div data-dojo-type="DeclarativeContentSetter" data-dojo-id="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content">
		<script type="dojo/method" data-dojo-event="onBegin">
			this.content = this.content.toUpperCase();
			console.log(this.id + ", made my content look like this:" + this.content);
		</script>
		<script type="dojo/method" data-dojo-event="onFoo">
			console.log("dojo/method supplied onBegin");
			this.content = this.content.toUpperCase();
		</script>
		</div>
	</div>
	<div id="another">
		<div id="myTest9" data-dojo-type="DeclarativeContentSetter">
			Some content
			<script type="dojo/method">
				console.log("parsed me!");
			</script>
		</div>
	</div>
	<h1 id="simpleText">test</h1>
</body>
</html>
